<template>
  <div class="app-login wrapper">
    <div class="content _flex_y page">
      <!-- logo图 及标题 start -->
      <header class="_flex_y _align_center _justify_between">
        <b class="_bgimg_content" style="background-image:url(./images/wap_login_logo.png)"></b>
        <h3>华为账号</h3>
      </header>
      <!-- logo图 及标题 end -->
      <!-- 登录 表单区域 -->
      <div class="login-form _flex_y _align_center">
        <!-- 用户名 -->
        <div class="accountNumber input-box">
          <input v-model="accountNumber" type="text" placeholder="手机号/邮件地址/华为账号" style="border:0">
        </div>
        <!-- 密码 -->
        <div class="password input-box">
          <input v-model="password" :type="inputType" placeholder="密码" style="border:0">
          <img
            v-if="inputType=='password'"
            @click="inputType=inputType=='password'?'text':'password'"
            src="https://hwid1.vmall.com/CAS/up/idmw_rss_25/css/mobile/standard_rss/images/eyeoff_wap_ui9.png?cas20181223"
            alt
          >
          <img
            v-else
            @click="inputType=inputType=='password'?'text':'password'"
            src="https://hwid1.vmall.com/CAS/up/idmw_rss_25/css/mobile/standard_rss/images/eyeon_wap_ui9.png?cas20181223"
            alt
          >
        </div>
        <!--  ———————————————————— 登录——————————————————————————-->
        <div v-if="isLogin" class="if-else-box _flex_y _align_center">
          <!-- 短信登录 and 记住账号 -->
          <div class="emui-box _justify_between">
            <a href>短信验证码登录</a>
            <div @click="flag=!flag" class="remember _justify_between _align_center">
              <img
                v-if="flag"
                src="https://hwid1.vmall.com/CAS/up/idmw_rss_25/css/mobile/standard_rss/images/tick-off.png?cas20181223"
                alt
              >
              <img
                v-else
                src="https://hwid1.vmall.com/CAS/up/idmw_rss_25/css/mobile/standard_rss/images/tick-on.png?cas20181223"
                alt
              >
              <span>记住账号</span>
            </div>
          </div>
          <!-- 登录/注册 按钮 -->
          <div class="submit-button" :class="{canClick}" @click="login">登 录</div>
          <!-- 切换 登录/注册 -->
          <div class="moreSelect _flex_y _justify_between">
            <a @click="changeInput">注册账号</a>
            <a href>忘记密码</a>
          </div>
        </div>
        <!--  ———————————————————— 登录—————end—————————————————————-->
        <!--  ———————————————————— 注册—————start—————————————————————-->
        <div v-else class="if-else-box _flex_y _align_center">
          <!-- 确认密码 -->
          <div class="password password2 input-box">
            <input v-model="password2" :type="inputType" placeholder="确认密码" style="border:0">
            <!-- <img
              @click="inputType=inputType=='password'?'text':'password'"
              src="https://hwid1.vmall.com/CAS/up/idmw_rss_25/css/mobile/standard_rss/images/eyeoff_wap_ui9.png?cas20181223"
              alt
            >-->
          </div>
          <!-- 登录/注册 按钮 -->
          <div class="submit-button" :class="{canClick}" @click="register">注 册</div>
          <!-- 切换 登录/注册 -->
          <div class="moreSelect _flex_y _justify_between">
            <a @click="changeInput">登录账号</a>
            <a href="/">返回首页</a>
          </div>
        </div>
        <!--  ———————————————————— 注册———end———————————————————————-->
        <!-- 第三方登录 -->
        <div class="thirdLogin _flex_x">
          <a href>
            <img
              src="https://hwid1.vmall.com/CAS/up/idmw_rss_25/css/mobile/standard_rss/images/wap_qq_emui9.png?cas20181223"
              alt
            >
          </a>
          <a href>
            <img
              src="https://hwid1.vmall.com/CAS/up/idmw_rss_25/css/mobile/standard_rss/images/wap_alipay_emui9.png?cas20181223"
              alt
            >
          </a>
        </div>

        <div class="moreMessage">
          <a href>更多</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      flag: true,
      inputType: "password",
      accountNumber: "",
      password: "",
      canClick: false, //登录按钮默认设置不能点击
      isLogin: true,
      password2: ""
    };
  },
  methods: {
    // 切换登录/注册状态
    changeInput() {
      this.accountNumber = "";
      this.password = "";
      this.password2 = "";
      this.isLogin = !this.isLogin;
    },
    //判断按钮能否点击，切换按钮的颜色
    isCanClick() {
      let SPACE_REGEXP = /^\s+$/g;
      if (this.isLogin) {
        if (
          this.accountNumber != "" &&
          !SPACE_REGEXP.test(this.accountNumber) &&
          this.password != "" &&
          !SPACE_REGEXP.test(this.password)
        ) {
          this.canClick = true;
        } else {
          this.canClick = false;
        }
      } else {
        if (
          this.accountNumber != "" &&
          !SPACE_REGEXP.test(this.accountNumber) &&
          this.password != "" &&
          !SPACE_REGEXP.test(this.password) &&
          this.password2 != "" &&
          !SPACE_REGEXP.test(this.password2)
        ) {
          this.canClick = true;
        } else {
          this.canClick = false;
        }
      }
    },
    //登录时的一些数据验证
    login() {
      //登录账户
      if (this.canClick) {
        if(!localStorage.userData){
          // 如果数据库用户数据为空
          Toast({
            message: `账号${this.accountNumber}不存在`,
            position: "middle",
            duration: 2000
          });
          return
        }
        let userData = JSON.parse(localStorage.userData);
        let thisUser = userData.filter(val => {
          return val.accountNumber === this.accountNumber;
        })[0];
        if (!thisUser) {
          Toast({
            message: `账号${this.accountNumber}不存在`,
            position: "middle",
            duration: 2000
          });
        } else if (thisUser.password !== this.password) {
          Toast({
            message: "密码错误，请重新输入",
            position: "middle",
            duration: 2000
          });
        } else {
          Toast({
            message: "登录成功",
            position: "middle",
            duration: 2000
          });
          let loginDidUser={
            accountNumber:this.accountNumber,
            password:this.password
          }
          loginDidUser=JSON.stringify(loginDidUser)
          localStorage.loginDidUser=loginDidUser
          this.$router.go(-1);
        }
      }
    },
    //注册的数据验证
    register() {
      // 注册账号
      if (this.canClick) {
        // 1.定义手机正则，密码正则，取用户数据库，及本次用户数据
        let TEL_REGEXP = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/,
          PWD_REGEXP = /^[0-9a-zA-Z]{6,16}$/,
          userData = localStorage.userData,
          userDataItem;
        if (!TEL_REGEXP.test(this.accountNumber)) {
          // 手机号不通过正则
          Toast({
            message: "请输入11位手机号",
            position: "middle",
            duration: 2000
          });
        } else if (!PWD_REGEXP.test(this.password)) {
          // 密码不通过正则
          Toast({
            message: "密码应为6-16位字母或数字",
            position: "middle",
            duration: 2000
          });
        } else if (this.password !== this.password2) {
          // 前后密码不一致
          Toast({
            message: "前后密码不一致",
            position: "middle",
            duration: 2000
          });
        } else {
          // 符合注册的格式要求，下面对数据库进行账号重名核对
          if (userData === undefined) {
            // 如果用户数据库为空，则将本次用户注册数据为第一条数据，放进用户数据数组集合中
            userDataItem = {
              id: 1,
              accountNumber: this.accountNumber,
              password: this.password
            };
            userData = [userDataItem];
          } else {
            let flag = true;
            userData = JSON.parse(userData);
            // 账户查重检测
            userData.forEach(val => {
              if (val.accountNumber === this.accountNumber) {
                return (flag = false);
              }
            });
            if (!flag) {
              // 账户存在
              Toast({
                message: `账号${this.accountNumber}已存在`,
                position: "middle",
                duration: 2000
              });
              return;
            } else {
              // 账户不存在，可用
              userDataItem = {
                id: userData.length + 1,
                accountNumber: this.accountNumber,
                password: this.password
              };
              userData.push(userDataItem);
            }
          }
          Toast({
                message: '注册成功',
                position: "middle",
                duration: 2000
              });
          localStorage.userData = JSON.stringify(userData); //将用户数据库转成字符串存储到数据库中
          this.changeInput()
        }
      }
    }
  },
  watch: {
    // 监听用户对用户名和密码的输入，来判断用户输入的值是否符合
    accountNumber() {
      this.isCanClick();
    },
    password() {
      this.isCanClick();
    },
    password2() {
      this.isCanClick();
    }
  },
  // beforeCreate() {
  //  this.$router.go(-1);
  // },
};
</script>

<style lang="stylus" scoped>
@import '~styles/_border.styl'

.app-login
  .content
    padding 0 0.16rem
    header
      height 1.04rem
      padding 0.48rem 0 0.24rem
      b
        width 0.49rem
        height 0.49rem
      h3
        font-size 0.24rem
        font-weight normal
    .login-form
      .input-box
        width 100%
        height 0.34rem
        margin-bottom 0.08rem
        border 0 0 1px 0, #ccc
        &.accountNumber
          margin-bottom 0.2rem
        &.password
          position relative
        &.password2
          margin 0.16rem 0
        input
          width 100%
          height 100%
          flex 1
          outline 0
          font-size 0.15rem
          color #191919
        img
          width 0.24rem
          height 0.24rem
          position absolute
          right 0
          top 0.05rem
      .if-else-box
        width 100%
      .emui-box
        width 100%
        height 0.24rem
        margin 0.16rem 0
        a
          color #005BBA
          line-height 0.24rem
        .remember
          width 0.84rem
          img
            width 0.24rem
            height 0.24rem
      .submit-button
        width 2.23rem
        height 0.32rem
        margin-bottom 0.16rem
        line-height 0.32rem
        text-align center
        border-radius 0.05rem
        color #ffffff
        background #007dff
        opacity 0.3
        &.canClick
          opacity 1
      .moreSelect
        height 0.48rem
        a
          color #005bba
      .thirdLogin
        height 0.4rem
        margin-top 0.64rem
        a
          width 0.68rem
          display flex
          justify-content center
          img
            width 0.4rem
            height 0.4rem
      .moreMessage
        margin 0.4rem 0 0.2rem
        a
          color #005bba
</style>
